<template>
	<view class="page" v-if="loadding" :style="{minHeight:windowHeight+'px'}">
		<view class="page-head">
			<view class="page-location">
				<view class="page-head-img">
					<image class="location" src="../../static/dafaulthead2.png" v-if="detail.avatarUrl == '' "></image>
					<image class="location" :src="detail.avatarUrl" mode="aspectFill" title="头像" v-else></image>
				</view>
				<view class="page-head-input" @click="showMulLinkageThreePicker">
					<text class="page-head-Select">{{location}}</text>		
					<image class="select-img"  src="../../static/app/jiaotou2.png"></image>
				</view>
			</view>
			
			<view class="inputMsg" @click="gotoinputMsg"> <image src="../../static/app/zhaop.png"></image> </view>
		</view>
		<view class="page-head-tab">
			<view class="tab-wrap">
				<view @click="doSelectTab(1)" class="tab-item" :class="tab == 1 ? 'on' : ''">推荐</view>
				<view @click="doSelectTab(2)" class="tab-item" :class="tab == 2 ? 'on' : ''">附近</view>
				<view @click="doSelectTab(3)" class="tab-item" :class="tab == 3 ? 'on' : ''">最新</view>
			</view>
			<view class="select-down" @click="screen">
				<text>筛选</text>
				<text class="icon iconfont icon-sanjiao1"></text>
			</view>
		</view>
		<view class="list-wrap">
			<!-- <block v-for="(item,index) in 2" :key="index">
				<view class="list-item">
					<view class="item-info">
						<view class="info-avatar">
							<image src="../../static/app/logo.png" mode=""></image>
						</view>
						<view class="info">
							<view class="item-name">
								吴彦祖
							</view>
							<view class="item-tag">
								<text>26岁</text>
								<text>|</text>
								<text>三年驾龄</text>
								<text>|</text>
								<text>C1</text>
								<text>|</text>
								<text>广西桂林</text>
							</view>
						</view>
					</view>
					<view class="item-btn" @click="phoneCall('18278147471')">
						立即沟通
					</view>
				</view>
			</block> -->
			<block v-for="(item,index) in driver" :key="index">
				<view class="list-item">
					<view class="item-info">
						<view class="info-avatar">
							<image src="../../static/app/logo.png" mode="" v-if="item.driverImage != ''"></image>
							<image :src="item.driverImage" mode="" v-else></image>
						</view>
						<view class="info">
							<view class="item-name">
								{{item.realname}}
							</view>
							<view class="item-tag">
								<text>{{item.age}}岁</text>
								<text>|</text>
								<text>驾龄:{{item.age_name}}</text>
								<text>|</text>
								<text>{{item.type_name}}</text>
								<!-- <text>|</text>
								<text>{{item.address}}</text> -->
							</view>
						</view>
					</view>
					<view class="payBox">
						<view class="pay">
							日薪: {{item.pay}} 元
						</view>
						<view class="item-btn" @click="phoneCall(item.mobile)">
							立即沟通
						</view>
					</view>
					
				</view>
			</block>
		</view>
		<!-- 没有记录 -->
		<view class="null d-c-c p30" v-if="driver.length == 0 ">
			<text class="iconfont icon-wushuju"></text>
			<text class="cont">亲，暂无相关记录哦</text>
		</view>
		<view v-else v-show="isLoadMore">
			<uni-load-more :loadingType="Onloadding"></uni-load-more>
		</view>
		<!-- <uni-load-more v-else :loadingType="loadingType"></uni-load-more> -->
		<view class="screen-box" v-show="isShow" :style="{height:windowHeight+'px'}">
			<view class="yy" @click="close" :style="{height:windowHeight+'px'}"></view>
			<view class="screen">
				<view class="screen-head">
					<view>
						<image class="close" src="../../static/close.png" @click="close"></image>
					</view>
					<text>筛选</text>
				</view>
				<view class="screen-item">
					<h4>驾照类型</h4>
					<!-- <view class="screen-type" v-for="(item,index) of selectType" @click="doSelectType(item)">
						<view class="type-item" :class="type == index ? 'have' : ''">{{item.type_name}}</view>
					</view> -->
					<view class="screen-type" @click="doSelectType('')">
						<view class="type-item" :class="type_id == '' ? 'have' : ''">不限</view>
					</view>
					<view class="screen-type" v-for="(item,index) of selectType" @click="doSelectType(item.type_id)">
						<view class="type-item" :class="type_id == item.type_id ? 'have' : ''">{{item.type_name}}</view>
					</view>
				</view>
				<view class="screen-item">
					<h4>驾龄</h4>
					<!-- <view  v-if="selectYears == ''" class="screen-type" v-for="(item,index) of selectYears2" @click="doSelectYear2(item.yearsid)">
						<view class="type-item" :class="year_id == index ? 'have' : ''">{{item.name}}</view>
					</view> -->
					<view  class="screen-type" @click="doSelectYear('')">
						<view class="type-item" :class="year_id == '' ? 'have' : ''">不限</view>
					</view>
					<view class="screen-type" v-for="(item,index) of selectYears" @click="doSelectYear(item.id)">
						<view class="type-item" :class="year_id == item.id ? 'have' : ''">{{item.driver_age}}</view>
					</view>
					
				</view>
				<view class="screen-item">
					<h4>性别</h4>
					<view class="screen-type" v-for="(item,index) of selectSex" @click="doSelectSex(item)">
						<view class="type-item" :class="sex == index ? 'have' : ''">{{item.name}}</view>
					</view>
				</view>
				<view class="screen-foot">
					<view class="screen-clear" @click="clear">清除</view>
					<view class="screen-confirm" @click="confirm($event)">确定</view>
				</view>
			</view>
		</view>
		<mpvue-city-picker ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
		<footTabber></footTabber>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more.vue';
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
	export default {
		components: {
			mpvueCityPicker,
			uniLoadMore
		},
		data() {
			return {
				not:0,
				loadding: true,
				phone: '19167744084',
				tab: 1,
				isShow: false,
				type: '',
				sex: '',
				// selectType: [{
				// 		name: 'C1',
				// 		typeid: 0
				// 	},
				// 	{
				// 		name: 'C2',
				// 		typeid: 1
				// 	},
				// 	{
				// 		name: 'C3',
				// 		typeid: 2
				// 	},
				// ],
				selectType: '',
				type_id: '',//驾照类型id
				selectYears: '',
				year_id: '',
				selectYears2: [{
						name: '不限',
						yearsid: '',
					},
					{
						name: '一年以内',
						yearsid: 1,
					},
					{
						name: '1-3年',
						yearsid: 2,
					},
					{
						name: '3-5年',
						yearsid: 3,
					},
					{
						name: '5-10年',
						yearsid: 4,
					},
					{
						name: '10年以上',
						yearsid: 5,
					}
				],
				selectSex: [{
						name: '不限',
						sexid: ''
					},
					{
						name: '男',
						sexid: 1
					},
					{
						name: '女',
						sexid: 2
					},
				],
				windowHeight: '',
				yyHeight: '',
				driver: [],
				mobile:'',
				location:'',
				detail: {
					avatarUrl: '', //头像
				},
				cityPickerValueDefault: [0, 0, 0],
				isLoadMore: false, //是否加载中
				page: 1,
				pagesize: 10,
				Onloadding:0,
			};
		},
		onLoad() {
			this.page = 1;
			this.driver = [];
			this.getDatainfo();//获取个人数据
			this.getType();//获取驾照类型
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight - uni.upx2px(25);
					this.yyHeight = this.windowHeight - 460;
				}
			});
			this.getDate();//获取司机
			this.getYear();//获取驾照
			this.getLocation();//定位
			
		},
		onPullDownRefresh() {
			this.page = 1;
			this.driver = [];
			this.getDate();
			this.getDatainfo();
			this.getYear();
			this.getType();
			this.getLocation();
			setTimeout( () => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() { //上拉触底函数
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.page += 1
				this.getDate();
			}
		},
		onShow() {
			
		},
		methods: {
			gotoinputMsg(){
				uni.navigateTo({
					url:'/pages/recruitment/inputMsg/inputMsg'
				})
			},
			/* 获取当前位置 */
			getLocation() {
				let self = this;
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: function(res) {
						self.location = res.address.city;
					},
					fail: function(res) {
						
					}
				});
			},
			/*三级联动选择*/
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show();
			},
			/*确定选择的省市区*/
			onConfirm(e) {
				this.selectCity = e.label;
				this.province_id = e.cityCode[0];
				this.city_id = e.cityCode[1];
				this.region_id = e.cityCode[2];
				var str = this.selectCity.replace(/,/, "1");
				var str1 = str.indexOf("1");
				var str2 = str.indexOf(",");
				var str3 = str.substring(str1 + 1, str2);
				this.location = str3;
			},

			/*获取个人数据*/
			getDatainfo() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._get('user.index/detail', {}, function(res) {
					self.detail = res.data.userInfo;
					self.loadding = true;
				});
			},
			/* 获取驾照类型 */
			getType() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._get('home/getdrivertype', {}, function(res) {
					self.selectType = res.data.driver_type;
					uni.hideLoading();
				});
			},
			/* 获取驾照 */
			getYear() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._get('car.index/get_driveage', {}, function(res) {
					self.selectYears = res.data.list;
					uni.hideLoading();
				});
			},
			phoneCall(mobile) {
				//console.log(mobile);
				uni.makePhoneCall({
					phoneNumber: mobile,
				});
			},
			confirm(e) {
				this.isShow = false;
				this.page = 1;
				this.driver = [];
				console.log(e)
				this.getDate();
				this.clear();
			},
			doSelectSex: function(item) {
				let self = this;
				self.sex = item.sexid;
			},
			doSelectYear2: function(item) {
				if (item != this.year_id) {
					this.year_id = item;
				}

			},
			doSelectYear: function(item) {
				if (item != this.year_id) {
					this.year_id = item;
				}
			
			},
			/* 驾照类型选择 */
			doSelectType: function(item) {
				if (item != this.type_id) {
					this.type_id = item;
				}
			},
			doSelectTab: function(tab) {
				let self = this;
				self.page = 1;
				self.driver = [];
				self.tab = tab;
				self.getDate();
			},
			/* 获取数据 */
			getDate() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._post('user.index/driver', {
						type: self.tab,
						selectType: self.type_id,
						selectYears: self.year_id,
						selectSex: self.sex,
						page:self.page
					},
					function(res) {
						console.log(res);
						//self.driver = res.data.driver.data;
						if (res.data.driver.data) {
							self.driver = self.driver.concat(res.data.driver.data)
							if (res.data.driver.data.length < res.data.driver.per_page) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
								self.isLoadMore = true
								self.Onloadding = 2
							} else {
								self.isLoadMore = false
							}
						} else {
							self.isLoadMore = true
							self.Onloadding = 2
						}
						//self.phone = res.data.driver.driver_phone;
						uni.hideLoading();
					})
			},
			clear() {
				let self = this;
				self.sex = '';
				self.type_id = '';
				self.year_id = '';
			},
			screen() {
				let self = this;
				self.isShow = true;
			},
			close() {
				let self = this;
				self.isShow = false;

			},
		}
	}
</script>

<style lang="scss">
	@import 'recruitment.scss';
</style>
